<script>
export default {
  name: 'MyFooter',
  data() {
    return {}
  },
  props: ['todos', 'allChecked'],
  methods: {
    //全选
    allChangeTodo1() {
      // eslint-disable-next-line vue/no-mutating-props
      this.allChecked = !this.allChecked
      this.$emit('allChangeTodo', this.$refs.allChange.checked)
    },
    //清除已完成的任务
    cleanTodo() {
      this.$emit('cleanTodo')
    }
  }
}
</script>

<template>
  <div>
    <input ref="allChange" :checked="this.allChecked" type="checkbox" @change="allChangeTodo1()">
    <span>已完成{{ todos.filter(todo => todo.done === true).length }}/全部{{ todos.length }}</span>
    <button class="cleanTodo" @click="cleanTodo">清除已完成的任务</button>
  </div>
</template>

<style scoped>
input, span {
  position: relative;
  bottom: 10px;
  left: 10px;
}

.cleanTodo {
  float: right;
  position: relative;
  bottom: 10px;
  right: 10px;
}
</style>